// 使用一个混合宏来简化 flex 属性的设置
@mixin flex-properties($justify: null, $align: null, $direction: null, $wrap: null) {
    @if $justify {
        justify-content: $justify;
    }

    @if $align {
        align-items: $align;
    }

    @if $direction {
        flex-direction: $direction;
    }

    @if $wrap {
        flex-wrap: $wrap;
    }

    display: flex;
}

.fx {
    display: flex;

    &-rw {
        flex-direction: row;
    }

    &-cn {
        flex-direction: column;
    }

    &-fl {
        flex: 1;
    }

    &-wp {
        flex-wrap: wrap;
    }

    &-np {
        flex-wrap: nowrap;
    }

    &-sk-0 {
        flex-shrink: 0;
    }

    &-ag-ct {
        @include flex-properties(null, center);
    }

    &-js-ct {
        @include flex-properties(center, null);
    }

    &-bt-ct {
        @include flex-properties(space-between, center);
    }

    &-ct-ct {
        @include flex-properties(center, center);
    }
}
